<template>
    <div class="container">
        <h3>供货商</h3>
        <el-form :model="ruleForm" ref="ruleForm"  :rules = "rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">

            <div >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="供应商名称：" prop="supplierName">
                           <el-input placeholder="请输入内容" v-model="ruleForm.supplierName" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="所在地区：" prop="area">
                            <el-cascader size="large" :options="options" style="width:300px" v-model="ruleForm.area" @change="handleChange"></el-cascader>
                        </el-form-item>
                        <el-form-item label="联系方式：" prop="phone">
                           <el-input placeholder="请输入内容" v-model="ruleForm.phone" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="备注：" >
                            <el-input style="width:300px" type="textarea" name="" id="" rows="5"  v-model="ruleForm.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="经办人：" >
                            <el-input style="width:300px" v-model="ruleForm.user"></el-input>
                        </el-form-item>
                        <el-form-item label="单价：" >
                            <el-input style="width:300px" v-model="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="装卸及运费：" >
                            <el-input style="width:300px" v-model="ruleForm.freight"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人姓名：" prop="userName">
                           <el-input placeholder="请输入内容" v-model="ruleForm.userName" style="width:325px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="详细地址：" prop="address">
                           <el-input placeholder="请输入内容" v-model="ruleForm.address" style="width:325px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="物资类型：" prop="supply">
                            <el-select v-model="ruleForm.type" style="width:325px">
                                <el-option label='农药' value='农药'></el-option>
                                <el-option label='化肥' value='化肥'></el-option>
                                <el-option label='调节剂' value='调节剂'></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物资名称：" prop="supplyName">
                            <el-input placeholder="请输入内容" v-model="ruleForm.name" style="width:325px"></el-input>
                        </el-form-item>
                        <el-form-item label="数量：" >
                            <el-input style="width:325px" v-model="ruleForm.num"></el-input>
                        </el-form-item>
                    </el-col>
            </el-row>
            <el-row>
                <el-col :span='12'>
                    <el-form-item label="发票信息：" >
                        <el-select style="width:300px" v-model="ruleForm.invoice">
                            <el-option label='不开发票' value='不开发票'></el-option>
                            <el-option label='增值税普通发票' value='增值税普通发票'></el-option>
                            <el-option label='增值税专用发票' value='增值税专用发票'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="付款情况：" >
                        <el-select style="width:300px" v-model="ruleForm.payState">
                            <el-option label='未付款' value='未付款'></el-option>
                            <el-option label='已付首款' value='已付首款'></el-option>
                            <el-option label='已付全款' value='已付全款'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="付款金额：" >
                        <el-input style="width:300px" v-model="ruleForm.payMoney"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="付款方式：" >
                        <el-select style="width:300px" v-model="ruleForm.payWay">
                            <el-option label='现金' value='现金'></el-option>
                            <el-option label='银行转账' value='银行转账'></el-option>
                            <el-option label='微信' value='微信'></el-option>
                            <el-option label='支付宝' value='支付宝'></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item class="footerFixed">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
            </div>
        </el-form>
    </div>
</template>
<script>
    import {supplier_save,supplier_findById,supplier_update} from '@/request/api'
    import {regionData,CodeToText} from 'element-china-area-data'
    export default {

        data() {
            return {
                isShow:false,
                city:'',
                area:'',
                options: regionData,
                selectedOptions: [],
                labelPosition:'right',
                allMessage: '',
                ruleForm: {
                    num:'',
                    supplierName:'',
                    area:'',
                    address:'',
                    userName:'',
                    phone:'',
                    remark:'',
                    freight:'',
                    user:'',
                    price:'',
                    type:'',
                    name:'',
                    payMoney:'',
                    payWay:'',
                },
                rules:{
                    // supplierName: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    // address: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    // phone: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    // area: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    // userName: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],

                }
            };
        },
        mounted(){
            this.id = this.$route.query.id
            if(this.id == undefined){

            }else{
                this.init()
            }
        },
        methods: {
            init(){
                supplier_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
					this.ruleForm.area = this.ruleForm.area.split(",")

                })
            },
            handleChange(value) {

            },

            backPage () {
                this.$router.go(-1);
            },

            submitrule(formName) {
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        if(this.ruleForm.phone != ""){
                            let reg = /^1[34578]\d{9}$/;
                            if(!reg.test(this.ruleForm.phone)){
                                this.$notify({
                                    title: '提示',
                                    message: '手机号格式不正确，请重新填写',
                                    type: 'info'
                                });
                                return false
                            }
                        }
						this.ruleForm.area = this.ruleForm.area.join(",")
                        if(this.id == undefined){
                            supplier_save(this.ruleForm).then((res)=>{
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration:1000
                                });
                                this.$router.go(-1)
                            })
                        }else{
                            supplier_update(this.ruleForm).then((res)=>{
                                this.$notify({
                                    title: '提示',
                                    message: '修改成功',
                                    type: 'success',
                                    duration:1000
                                });
                                this.$router.go(-1)
                            })
                        }
                    }else{
                        return false
                    }
                })
            },
        }
    }
</script>

<style scoped lang="less">
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>
